<template >
    <div class="Person">
        姓名{{person1.name}}
        年纪{{person1.age}}
        <button @click="changeName">修改名字</button>
        <button @Click="changeAge">修改年龄</button>
        <button @click="showTel">查询电话号码</button>
        <button @click="jishuqi">计数器</button>
        计数值{{jishu}}
        <br>
        {{brandName}}
        汽车品牌{{car.brand}}
        汽车价格{{car.price}}万
        <button @click="changePrice">修改汽车价格</button>
        <button @click="changeAll">换一辆汽车</button>
        <button @click="changeRefsCar">修改toRefs解构后的数据 被结构的数据car也会跟着变</button>
    

        <h2>游戏列表</h2>
        <u1>
            <!-- 循环遍历出数组的内容 -->
            <li v-for="g in games" :key="g.id">{{g.name}}</li>  
        </u1>
        <button @click="changeFirstGameName">修改第一个游戏名</button>
    </div>
</template>

<script lang ="ts">
import { ref } from 'vue';   //如果要使用ref定义响应的基本数据 就要引入
import { reactive,toRefs,toRef} from 'vue';  //如果要使用reactive定义响应的基本数据  就要引入
    export default{
        name:'Person',
        setup(){      //vue2写法 data() 是可以读取setup的数据的，因为setup是最早执行的, data()在用setup的时候用 this.name  data()和setup()可以同时存在
            const person1 = {
             name : 'asd',   //非响应的
              age:123,      //非响应的
              tel :13838838388   //非响应的
            }
     
        function changeName(){
            person1.name = 'zhangsan'
        }
        function changeAge(){
            person1.age +=1
        }
        function showTel(){
            alert(person1.tel)
        }

                
        const jishu = ref(0)    //响应的，ref定义基本类型数据
        function jishuqi(){
            jishu.value = jishu.value+1;  //响应的，需要.value才能获取到值, 变量和函数都要return出去才可以
        }

        let car = reactive({   //响应的，reactive定义对象类型数据
            brand:'奔驰',
            price:100
        })
        function changePrice(){
            car.price +=10  //这里不需要用.value
        }
        function changeAll(){
            // car = {brand:'宝马',price:200}     //此时发现如果只改某个属性可以响应， 如果替换掉整个对象就不能响应了， 解决办法就用 对象深拷贝的方式 我每个属性进行替换，不能浅拷贝直接赋值
            // car.value = {brand:'宝马',price:200}   如果car使用ref包的，那么这样写就可以 ，不推荐
            Object.assign(car,{brand:'宝马',price:200})
        }

        let {brand,price}  = toRefs(car)  //将car的属性都进行响应式的包装，这样解构出来的brand和price都具有响应式，第一个地方改了所以用到的地方都会跟着变
        let brandName = toRef(car.brand)  //将car的单个属性 brand进行 包装， 这样brankName也具有了响应式，但是改了brandName，不影响car的brank
        function changeRefsCar(){
            brand.value = '123',
            price.value = 900
        }
        function changeRefCarBrank(){
            brandName.value = '小汽车滴滴滴'
        }

        let games = reactive([   //响应的，reactive定义对象类型数据，数组也是对象
            {id:'1',name:'王者荣耀'},
            {id:'2',name:'原神'},
            {id:'3',name:'吃鸡'}
        ])
        function changeFirstGameName(){
            games[0].name = '流星蝴蝶剑'
        }

         return {person1,jishu,car,games,brandName,jishuqi,changeAge,changeName,showTel,changePrice,changeAll,changeFirstGameName,changeRefsCar,changeRefCarBrank}
        
        //  return ()=>{'哈哈'}  //setUp的返回值也可以是一个函数
    }
    }
</script>



<style scoped >
.personClass{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
/* 注意
    ref 既可以定义 基本数据类型  也可以定义 对象， 但是都需要进行 .value 才能从代理对象拿出真的的值, ref里面其实还是用的reactive
    reactive 只能定义对象，不用.value就可以，这一步已经在函数里给我们做过了
    如果只改某个属性可以响应， 如果替换掉整个对象就不能响应了， 解决办法就用 对象深拷贝的方式 我每个属性进行替换，不能浅拷贝直接赋值
*/
</style>
